<template>
  <ContentWrap title="公司列表">
    <Table :data="companys" :columns="columns" row-key="Id" @change="load">
      <template #title>
        <BaseButton type="success" @click="add">新增公司</BaseButton>
      </template>
      <template #Status="e">
        <el-switch
          v-model="e.row.Status"
          :inactive-value="2"
          :active-value="1"
          @change="(value) => statusChange(e.row, value)"
        />
      </template>
      <template #leader="e">
        <span v-if="e.row.LeaderId">{{ e.row.Leader }}</span>
        <BaseButton
          :icon="editIcon"
          type="text"
          style="margin-left: 5px; cursor: pointer"
          @click="showEmp(e.row)"
        />
      </template>
      <template #admin="e">
        <span v-if="e.row.AdminId">{{ e.row.Admin }}</span>
        <BaseButton
          :icon="editIcon"
          type="text"
          style="margin-left: 5px; cursor: pointer"
          @click="showAdmin(e.row)"
        />
      </template>
      <template #CompanyType="e">
        {{ HrCompanyType[e.row.CompanyType].text }}
      </template>
      <template #AddTime="e">
        {{ $formatTime(e.row.AddTime, 'yyyy-MM-dd') }}
      </template>
      <template #Contacts="e">
        <span>{{ e.row.Contacts }}</span>
        <span v-if="e.row.Telephone">{{ ' ' + e.row.Telephone }}</span>
      </template>
      <template #action="e">
        <BaseButton
          v-if="e.row.Status == 0"
          size="small"
          :icon="dropIcon"
          type="danger"
          circle
          @click="drop(e.row)"
        />
        <BaseButton :icon="settingIcon" size="small" type="info" circle @click="editPower(e.row)" />
        <BaseButton :icon="editIcon" size="small" type="primary" circle @click="edit(e.row)" />
      </template>
    </Table>

    <empChoice
      :visible="empVisible"
      :emp-id="empId"
      :title="empTitle"
      :company-id="id"
      :is-sub-company="isSubCompany"
      @save="saveEmp"
      @close="empVisible = false"
    />
    <editCompany :id="id" v-model:visible="visible" :companys="companys" @close="close" />
    <editCompanyPower v-model:visible="powerVisible" :company-id="id" />
  </ContentWrap>
</template>

<script>
import { Table } from '@/components/Table'
import * as companyApi from '@/api/base/company'
import { HrEnumDic, HrCompanyType } from '@/config/publicDic'
import { empChoice } from '@/components/emp/'
import { useIcon } from '@/hooks/web/useIcon'
import { useUserStoreWithOut } from '@/store/modules/user'
import editCompanyPower from './components/editCompanyPower.vue'
import editCompany from './components/editCompany.vue'
const userStore = useUserStoreWithOut()
export default {
  components: {
    empChoice,
    Table,
    editCompany,
    editCompanyPower
  },
  data() {
    return {
      HrEnumDic,
      HrCompanyType,
      empId: null,
      visible: false,
      empVisible: false,
      powerVisible: false,
      isSubCompany: false,
      dropIcon: useIcon({ icon: 'ep:delete' }),
      editIcon: useIcon({ icon: 'ep:edit' }),
      settingIcon: useIcon({ icon: 'ep:setting' }),
      op: null,
      id: null,
      curRow: null,
      title: '公司列表',
      empTitle: '',
      columns: [
        {
          field: 'FullName',
          label: '公司全称',
          align: 'left'
        },
        {
          field: 'ShortName',
          label: '简称',
          align: 'left'
        },
        {
          field: 'CompanyType',
          label: '公司类型',
          slotName: 'CompanyType'
        },
        {
          field: 'Address',
          label: '地址',
          align: 'left'
        },
        {
          field: 'Contacts',
          label: '联系人',
          align: 'center',
          slotName: 'Contacts'
        },
        {
          field: 'Leader',
          label: '负责人',
          align: 'center',
          slotName: 'leader'
        },
        {
          field: 'Admin',
          label: '管理员',
          align: 'center',
          slotName: 'admin'
        },
        {
          field: 'Status',
          label: '状态',
          slotName: 'Status'
        },
        {
          field: 'AddTime',
          label: '添加时间',
          slotName: 'AddTime'
        },
        {
          field: 'Action',
          label: '操作',
          align: 'left',
          slotName: 'action'
        }
      ],
      queryParam: {
        ParentId: null,
        Status: null
      },
      companys: []
    }
  },
  computed: {
    comId() {
      return userStore.comId
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    showEmp(row) {
      this.curRow = row
      this.isSubCompany = false
      this.op = 'leader'
      this.id = row.Id
      this.empId = row.LeaderId == null ? [] : [row.LeaderId]
      this.empTitle = '选择' + row.FullName + '公司负责人'
      this.empVisible = true
    },
    showAdmin(row) {
      this.curRow = row
      this.op = 'admin'
      this.isSubCompany = true
      this.id = this.comId
      this.empId = row.AdminId == null ? [] : [row.AdminId]
      this.empTitle = '选择' + row.FullName + '公司管理员'
      this.empVisible = true
    },
    saveEmp(e) {
      this.empVisible = false
      if (this.op === 'leader') {
        this.setLeader(e)
      } else {
        this.setAdmin(e)
      }
    },
    async setAdmin(e) {
      const leader = e.user.length === 0 ? null : e.user[0]
      if (leader == null) {
        await companyApi.SetAdminId(this.curRow.Id, null)
      } else {
        await companyApi.SetAdminId(this.curRow.Id, leader.EmpId)
      }
      this.load()
    },
    async setLeader(e) {
      const leader = e.user.length === 0 ? null : e.user[0]
      if (leader == null) {
        await companyApi.SetLeaderId(this.id, null)
      } else {
        await companyApi.SetLeaderId(this.id, leader.EmpId)
      }
      this.load()
    },
    add() {
      this.id = null
      this.visible = true
    },
    edit(row) {
      this.id = row.Id
      this.visible = true
    },
    editPower(row) {
      this.id = row.Id
      this.powerVisible = true
    },
    async statusChange(row, status) {
      if (status === 1) {
        await companyApi.Enable(row.Id)
      } else {
        await companyApi.Stop(row.Id)
      }
      row.Status = status
    },
    drop(row) {
      const title =
        '确认删除公司 ' +
        (row.ShortName == null || row.ShortName === '' ? row.FullName : row.ShortName) +
        '?'
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitDrop(row.Id)
      })
    },
    async submitDrop(id) {
      await companyApi.Delete(id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.load()
    },
    close(isRefresh) {
      this.visible = false
      if (isRefresh) {
        this.load()
      }
    },
    async load() {
      const list = await companyApi.GetTree(this.queryParam)
      this.companys = list
    }
  }
}
</script>
